<template>
    <div class="wrapper customer-box">
        <el-form ref="customer" label-position="top" :inline="true" :model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="店铺ID:">
                        <el-input placeholder="店铺ID" v-model="filter.shopId" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="商品名称:">
                        <el-input placeholder="商品名称" v-model="filter.goodsName" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="商品ID:">
                        <el-input placeholder="商品ID" v-model="filter.goodsId" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="单价区间:">
                        <el-input placeholder="最低价" class="priceRange" v-model="filter.lowPrice" size="small"></el-input> 至
                        <el-input placeholder="最高价" class="priceRange" v-model="filter.highPrice" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="状态:">
                        <el-select v-model="filter.status" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已上架" value="sale"></el-option>
                            <el-option label="已售罄" value="sold"></el-option>
                            <el-option label="已下架" value="stop"></el-option>
                            <el-option label="仓库中" value="store"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="发布时间:">
                        <el-date-picker
                                size="small"
                                v-model="releaseTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty" icon="el-icon-delete">清空筛选条件</el-button>
                        <el-button size="small" type="primary" @click="getProducts" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row class="customer_row">
            <el-table :data="productList" v-model="productList" style="width: 100%;" highlight-current-row border>
                <el-table-column type="index" width="55" className="asd"></el-table-column>
                <el-table-column prop="shopName" label="店铺名称" className="item" min-width="200"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col">
                            <span @click="handleToShop(scope.row.shopId)">
                                {{ scope.row.shopName}}
                            </span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="shopId" label="店铺ID" align="center" min-width='150' className="item"></el-table-column>

                <el-table-column prop="goodsPicUrl" label="商品图片" className="item" min-width="120"　align="center" >
                    <template scope="scope" >
                        <img :src="scope.row.goodsPicUrl" @click="handleToDetailProduct(scope.row.goodsId)" />
                    </template>
                </el-table-column>

                <el-table-column prop="goodsName" label="商品名称" className="item" min-width="200"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col">
                            <span @click="handleToDetail(scope.row)"  :class="{ active: scope.row.visited == true }">
                                {{ scope.row.goodsName}}
                            </span>
                        </div>
                    </template>
                </el-table-column>


                <el-table-column prop="goodsId" label="商品ID" align="center" min-width='280' className="item"></el-table-column>
                <el-table-column prop="price" label="单价" align="center" min-width='100' className="item"></el-table-column>
                <el-table-column prop="inventory" label="库存" align="center" min-width='100' className="item"></el-table-column>
                <el-table-column prop="collect" label="收藏" min-width="50" align="center" className="item"></el-table-column>
                <el-table-column prop="sales" label="总销量" min-width="100" align="center" className="item"></el-table-column>
                <el-table-column prop="statusName" label="状态" min-width="80" align="center" className="item"></el-table-column>
                <el-table-column prop="releaseDate" label="发布时间" min-width="160" align="center" className="item"></el-table-column>
                <el-table-column prop="action" label="操作"  min-width='100' fixed="right" align="center" className="item">
                    <template scope="scope">
                        <div class="operator-btn">
                            <el-button type="primary" icon="el-icon-sold-out" size="mini" @click="unPublishedBox(scope.row)" v-show="scope.row.status == 'stop' ? false : true">下架</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBox(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="filter.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,
        Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {getDate , returnDate,getArraySub , getLevelName, validTel, setToken, getCookie ,uniqueArr} from '../../utils/auth'
    import { addUS ,getProductStatusName} from '../../assets/js/option.js';
    import {formatDate} from '../../assets/js/common.js';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);

    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        head(){
            return {
                title: this.title
            }
        },
        data () {
            return {
                title: '商品列表',
                tabName: '商品列表',
                index: 'index',
                filter: {
                    shopId: '',   //店铺名称
                    goodsName: '',   //商品名称
                    goodsId: '',    //商品Id
                    lowPrice: '',    //单价区间
                    highPrice: '',    //单价区间
                    status: '',      //状态
                    startTime:'', //发布时间开始
                    endTime:'',   //发布时间结束
                    pageNum:1,
                    pageSize: 10      // 每页条数
                },
                releaseTime:[],
                pagingData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1,
                    pageSize: 50
                },
                productList:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                }
            }
        },
        computed : {
            ...mapGetters([
                "myCustomerFilter",
                "myCustomerXY",
                "myCustomerCategory"
            ])
        },

        methods: {
            // 获取商品列表
            getProducts () {
//                this.setFilterCookie();
                if (this.releaseTime && this.releaseTime[0]) {
                    this.filter.startTime = this.releaseTime[0] ? getDate(this.releaseTime[0],true) : '';
                    this.filter.endTime =  this.releaseTime[1] ? getDate(this.releaseTime[1],true) : '';
                }else{
                    this.filter.startTime ='';
                    this.filter.endTime = '';
                }
                this.$store.dispatch('productsList', this.filter)
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.data) {
                            this.productList = result.data.list;
                            for(var i = 0; i < this.productList.length; i++) {
                                this.productList[i].visited = false;
                                this.productList[i].releaseDate = formatDate(this.productList[i].releaseDate,'YYYY-MM-dd hh:mm:ss');
                                this.productList[i].price = addUS(this.productList[i].price);
                                this.productList[i].statusName = getProductStatusName(this.productList[i].status);
                            }
                            for(var j=0;j<this.visitedUrl.length;j++){
                                for(var i = 0; i < this.productList.length; i++) {
                                    if(this.productList[i].goodsId == this.visitedUrl[j]){
                                        this.productList[i].visited = true;
                                    }
                                }
                            }
                            this.pagingData.total = result.data.total;
                            this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                        }
                        else if(result.data = null){
                            this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                        else{
                            this.productList = [];
                            this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                    })
            },

            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getProducts(this.filter);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getProducts(this.filter);
            },
            // 下架商品弹框
            unPublishedBox (row) {
                MessageBox.confirm('确认下架：' + row.goodsName + '吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.unPublished(row);
                }).catch(() => {
                });
            },
            // 下架商品
            unPublished (row) {
                this.$store.dispatch('unPublishedProduct', {shopId: row.shopId, goodsId: row.goodsId})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.successed == true) {
                            this.getProducts({pageNum: 1, pageSize: 10});
                            Message.success({
                                message: '操作成功'
                            });
                        }else{
                            Message.error({
                                message: '操作失败'
                            })
                        }
                    })
            },

            // 删除商品弹框
            deleteBox (row) {
                MessageBox.confirm('确认删除客户：' + row.goodsName + '吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteProduct(row);
                }).catch(() => {
                });
            },
            // 删除商品
            deleteProduct (row) {
                this.$store.dispatch('deleteProduct', {shopId: row.shopId, goodsId: row.goodsId})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.successed == true) {
                            this.getProducts({pageNum: 1, pageSize: 10});
                            Message.success({
                                message: '删除成功'
                            });
                        }else{
                            Message.error({
                                message: '删除失败'
                            })
                        }
                    })
            },
            empty () {
                this.filter = {
                    shopId: '',   //店铺名称
                    goodsName: '',   //商品名称
                    goodsId: '',    //商品Id
                    lowPrice: '',    //单价区间
                    highPrice: '',    //单价区间
                    status: '',      //状态
                    startTime:'', //发布时间开始
                    endTime:'',   //发布时间结束
                    pageNum:1,
                    pageSize: 10      // 每页条数
                };
                this.releaseTime = []
            },
            //跳转到商品详情页
            handleToDetail(row) {
                let arr = this.visitedUrl;
                arr.push(row.goodsId);
                arr = uniqueArr(arr);
                this.$store.commit('VISITEDURL',{visitedUrl:arr});
                this.$router.push({path: '/product/detail?shopId='+ row.shopId + '&goodsId=' + row.goodsId})
            },
            handleToDetailProduct(itemId) {
                window.open('http://trade.onloon.net/detail?itemId=' + itemId, '_blank');
            },
            handleToShop(shopId) {
                window.open('http://trade.onloon.net/?shopId=' + shopId, '_blank');
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList',
                'visitedUrl': 'getVisitedUrl'
            })
        },
        created(){
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            this.getProducts();
        }
    }

</script>

<style lang="scss">
    html,body{
        height: 100%;
    }
    .customer-box{
        .priceRange {
            width: 40% !important;
        }
        .one{
            color:red!important;
        }

        .el-table .item>div{
            padding: 0;
        }
        .el-table .item img {
            width: 100px;
            cursor: pointer;
        }
        .operator-btn{
            .el-button+.el-button {
                margin-left: 0;
            }
            .el-button {
                margin-bottom: 3px;
            }
        }
        .el-form {
            .el-form-item {
                width: 70%
            }
            .operator-btn{
                text-align:center;
                padding:0 10px;
            }
            .el-input, .el-select, .el-cascader, .el-date-picker {
                width: 100%
            }
        }

        .action_col {
            position: relative
        }

        .customer_row {
            margin-top: 20px;
            background-color: #ff0000;
        }
        .paging {
            margin-top: 15px;
        }
        .customer_col {
            cursor: pointer;
            span {
                display: block;
                color: #20a0ff;
                word-break: normal;
                img {
                    margin-right: 5px;
                    cursor: pointer
                }
            }
            span.active {
                color: #48576a;
            }
        }
    }
</style>